<template>
<div class="home-login">
  <el-row :gutter="20" class="login-row" type="flex"  align="middle">
    <el-col :span="5" :offset="15" class="">
      <el-card class="login-card">
        <el-form   :model="account" :rules="rules" ref="account" >
          <el-row :gutter="10" type="flex" justify="center">
            <el-col :span="18" class="login-form-type">
              <el-link type="primary" disabled>注册账号</el-link>
              <span> | </span>
              <el-link type="info" @click="$router.push({name:'login'})">账户登入</el-link>
            </el-col>
          </el-row>
          <el-form-item label="" prop="phone">
            <el-input placeholder="请输入注册的手机号" v-model="account.phone"></el-input>
          </el-form-item>
          <el-form-item  >
            <el-row :gutter="10">
             <el-col :span="15" >
               <el-form-item prop="validate_code">
                 <el-input placeholder="请输入验证码" v-model="account.validate_code"></el-input>
               </el-form-item>
             </el-col>
              <el-col :span="7">
                <el-button type="primary" @click="getCode" v-if="!isSendSms" >{{sendCodeStr}}</el-button>
                <el-button type="primary" @click="getCode" disabled v-else>{{countdown}}秒</el-button>
              </el-col>
            </el-row>

          </el-form-item>
          <el-form-item  prop="password" >
            <el-input v-model="account.password" placeholder="请输入密码" type="password"></el-input>
          </el-form-item>
          <el-form-item  prop="password_confirmation" >
            <el-input v-model="account.password_confirmation" placeholder="确认密码" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register">创建</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
        <!--          忘记密码立即注册-->
        <el-row :gutter="10" type="flex" justify="end">
          <el-col :span="10">
            <el-link @click="$router.push({name:'login'})">立即注册</el-link>
            <span> | </span>
            <el-link>忘记密码</el-link>
          </el-col>
        </el-row>
        <!--          其他登入方式-->
        <!--          <div class="el-divider">-->
        <!--            其他登入方式-->
        <!--          </div>-->
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
import request from '../../../request/home/register'
export default {
  name: 'Registered',
  data () {
    var phone = (rule, value, callback) => {
      if (!(/^1[3456789]\d{9}$/.test(value))) {
        return callback(new Error('手机号不正确'))
      }
      return callback()
    }
    // 验证密码
    var validatePass = (rule, value, callback) => {
      if (value !== this.account.password_confirmation) {
        return callback(new Error('两次密码不一致'))
      }
      callback()
    }
    return {
      account: {
        name: '',
        password: '',
        password_confirmation: '',
        validate_code: ''
      },
      sendCodeStr: '发送验证码',
      isSendSms: false,
      countdown: 60,
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: phone, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        password_confirmation: [
          { required: true, message: '请输入确认密码', trigger: 'change' },
          { validator: validatePass, trigger: 'blur' }
        ],
        validate_code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取手机验证码
    getCode () {
      this.$refs.account.validateField('phone', (valid) => {
        if (valid !== '') {
          return false
        }
        request.getVerificationCode(this.account.phone, result => {
          if (result.type === 'success') {
            // 发送成功
            const interval = setInterval(() => {
              this.isSendSms = true
              this.countdown -= 1
              if (this.countdown <= 0) {
                this.countdown = 60
                this.isSendSms = false
                this.sendCodeStr = '重新发送'
                clearInterval(interval)
              }
            }, 1000)
          }
        })
      })
    },
    register () {
      // 表单验证
      this.$refs.account.validate((valid) => {
        if (!valid) {
          return false
        }
        request.registerRequest(this.account)
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .home-login {
    width: 100%;
    height: 550px;
    overflow-x:hidden;
    background: url("https://x.dscmall.cn/storage/data/afficheimg/1564453243544166182.jpg");
    .login-row {
      height: 550px;
    }
    .login-card {

      .login-form-type {
        margin-bottom: 20px;
        /deep/ span {
          padding: 5px;
          font-size: 24px;
        }
      }
    }
  }
</style>
